<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="Dashboard">
    <meta name="keyword" content="Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">

    <title>DASHGUM - Bootstrap Admin Template</title>

    <!-- Bootstrap core CSS -->
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <!--external css-->
    <link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
        
    <!-- Custom styles for this template -->
    <link href="assets/css/style.css" rel="stylesheet">
    <link href="assets/css/style-responsive.css" rel="stylesheet">
	<script src="assets/js/const.js"></script>
	<script src="assets/js/axios.min.js"></script>
	<script src="assets/js/vue.js"></script>

    <style> 
	.sex{ width: 50px; }
    .b{  border-radius: 10px; width: 50px; height: 30px; background-color: limegreen; text-align: center; line-height: 50px; color: #ffffff; }
    .c{ width: 50px; height: 60px; background-color: gainsboro; display: none; 
    
    /*visibility: hidden;*/ } 
    .c ul{ list-style: none; margin-left: -40px; } 
    .c ul li{ line-height: 30px; display: block; width: 50px; text-align: center; } 
    .sex:hover{ cursor: pointer; } 
    .sex:hover .c{ display: block; } 
    .sex:hover .b{ background-color: green; } 
    .c li:hover{ background-color: gray; color: #FFFFFF; } 
    
    </style> 
  </head>

  <body>

  <section id="container" >
      <!-- **********************************************************************************************************************************************************
      TOP BAR CONTENT & NOTIFICATIONS
      *********************************************************************************************************************************************************** -->
     
      <header class="header black-bg">
              <div class="sidebar-toggle-box">
                  <div class="fa fa-bars tooltips" data-placement="right" data-original-title="Toggle Navigation"></div>
              </div>
            <!--logo start-->
            <a href="index.html" class="logo"><b>相亲网站管理台</b></a>
           
            <div class="top-menu">
            	<ul class="nav pull-right top-menu">
                    <li><a class="logout" href="login.html">Logout</a></li>
            	</ul>
            </div>
        </header>
      
      <!-- **********************************************************************************************************************************************************
      MAIN SIDEBAR MENU
      *********************************************************************************************************************************************************** -->
      <!--sidebar start-->
      <aside>
          <div id="sidebar"  class="nav-collapse ">
              <!-- sidebar menu start-->
              <ul class="sidebar-menu" id="nav-accordion">
              
              	  <h2 class="centered">Admin</h5>
              	  
                  <li class="sub-menu">
                      <a class="active" href="javascript:;" >
                          <i class="fa fa-th"></i>
                          <span>数据库数据</span>
                      </a>
                      <ul class="sub">
                          <li class="active"><a  href="index.html">用户数据表</a></li>
      						  <li class="active"><a  href="index.html">活动数据表</a></li>
                      </ul>
                  </li>
      
              </ul>
              <!-- sidebar menu end-->
          </div>
      </aside>
      <!--sidebar end-->
      
      <!-- **********************************************************************************************************************************************************
      MAIN CONTENT
      *********************************************************************************************************************************************************** -->
      <!--main content start-->
      <section id="main-content">
          <section class="wrapper site-min-height">
          	<div class="row mt">
          		<div class="col-lg-12">
          	      <div class="form-panel">
          	      	  <h4 class="mb"><i class="fa fa-angle-right"></i> {{this.info.name}}</h4>
          	          <form class="form-horizontal style-form" method="get" >
          	              
          	              <div class="form-group">
          	                  <label class="col-sm-2 col-sm-2 control-label">姓名</label>
          	                  <div class="col-sm-10">
          	                      <input type="text" class="form-control" pattern="[\u4E00-\u9FA5A-Za-z]{2,10}" title="只能为中文或英文" v-model="info.name">
          	                      <span class="help-block">支持英文或中文.</span>
          	                  </div>
          	              </div>
						  <div class="form-group">
						      <label class="col-sm-2 col-sm-2 control-label">年龄</label>
						      <div class="col-sm-10">
						          <input type="text" class="form-control" pattern="[0-9]{0,3}" title="3位及以下的数字" v-model="info.age">
						          <span class="help-block">输入阿拉伯数字.</span>
						      </div>
						  </div>
						  <div class="form-group">
						      <label class="col-sm-2 col-sm-2 control-label" pattern="[0-9]{0,3}" title="3位及以下的数字">身高</label>
						      <div class="col-sm-10">
						          <input type="text" class="form-control" v-model="info.height">
						          <span class="help-block">支持英文或中文.</span>
						      </div>
						  </div>
						  
						  <div class="form-group">
						      <label class="col-sm-2 col-sm-2 control-label" >学校</label>
						      <div class="col-sm-10">
						          <input type="text" class="form-control" v-model="info.schoolName">
						          <span class="help-block">支持英文或中文.</span>
						      </div>
						  </div>
						  
          	             <div class="form-group">
          	                 <label class="col-sm-2 col-sm-2 control-label">性别</label>
						  <div class="sex col-sm-10">
						  <input class="b" v-model="info.sex">
						  <div class="c"> 
						  <ul> 
						  <li id="boy" v-on:click="selectSex('男')">男</li>
						  <li id="girl" v-on:click="selectSex('女')">女</li>
						  </ul> 
						  </div> 
						  </div> 
						</div>
						
						<div class="form-group">
						    <label class="col-sm-2 col-sm-2 control-label" >兴趣</label>
						    <div class="col-sm-10">
						        <input type="text" class="form-control" v-model="info.hobby">
						        <span class="help-block">支持英文或中文.</span>
						    </div>
						</div>
						
						<div class="form-group">
						    <label class="col-sm-2 col-sm-2 control-label">年级</label>
						    <div class="col-sm-10">
						        <input type="text" class="form-control"  v-model="info.grade">
						        <span class="help-block">支持英文或中文.</span>
						    </div>
						</div>
						
						<div class="form-group">
						    <label class="col-sm-2 col-sm-2 control-label" >外表打分</label>
						    <div class="col-sm-10">
						        <input type="text" class="form-control" v-model="info.appearance">
						        <span class="help-block">支持英文或中文.</span>
						    </div>
						</div>
						
						<div class="form-group">
						    <label class="col-sm-2 col-sm-2 control-label" >性格</label>
						    <div class="col-sm-10">
						        <input type="text" class="form-control" v-model="info.charac">
						        <span class="help-block">支持英文或中文.</span>
						    </div>
						</div>
						
						<div class="form-group">
						    <label class="col-sm-2 col-sm-2 control-label" >特长</label>
						    <div class="col-sm-10">
						        <input type="text" class="form-control" v-model="info.speciality">
						        <span class="help-block">支持英文或中文.</span>
						    </div>
						</div>
						
						<div class="form-group">
						    <label class="col-sm-2 col-sm-2 control-label">爱情宣言</label>
						    <div class="col-sm-10">
						        <input type="text" class="form-control"  v-model="info.say">
						        <span class="help-block">支持英文或中文.</span>
						    </div>
						</div>
						
						<div class="form-group">
							<div class="col-sm-10">
							<input class="button btn btn-theme" type="submit" name="button" value="提交" v-on:click="update()"/>
							<input class="button btn btn-theme" type="reset" name="button2" value="重置" v-on:click="reset()"/>
							</div>
						</div>
						</form>
          	      </div>
          		</div><!-- col-lg-12-->      	
          	</div><!-- /row -->
			
			
		</section><! --/wrapper -->
      </section>

      <!--main content end-->
      <!--footer start-->
      <footer class="site-footer">
          <div class="text-center">
              2014 - Alvarez.is - More Templates <a href="https://www.webmoban.net" target="_blank" title="网站模板">网站模板</a> - Collect from <a href="https://www.webmoban.net" title="网页模板" target="_blank">网页模板</a>
              <a href="blank.html#" class="go-top">
                  <i class="fa fa-angle-up"></i>
              </a>
          </div>
      </footer>
      <!--footer end-->
  </section>

    <!-- js placed at the end of the document so the pages load faster -->
    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/jquery-ui-1.9.2.custom.min.js"></script>
    <script src="assets/js/jquery.ui.touch-punch.min.js"></script>
    <script class="include" type="text/javascript" src="assets/js/jquery.dcjqaccordion.2.7.js"></script>
    <script src="assets/js/jquery.scrollTo.min.js"></script>
    <script src="assets/js/jquery.nicescroll.js" type="text/javascript"></script>


    <!--common script for all pages-->
    <script src="assets/js/common-scripts.js"></script>

    <!--script for this page-->
    
  <script>
      config = {
		  "el" : ".form-panel",
		  "data" : {
			  "info" : 
				  {
					  "id": 1,
				      "name": "小一",
				      "age": 21,
				      "sex": "男",
				      "height": 180,
				      "city": "北京",
				      "schoolName": "山东大学(威海）",
				      "grade": "大三",
				      "hobby": "吃饭 睡觉",
				      "charac": null,
				      "appearance": 100,
				      "speciality": "长得帅",
				      "say": "想找个另一半",
				      "image": "1.jpg",
				      "userName": "小一",
				}
			  
		  },
		  "methods" : {
			  "selectSex" : function(v){
				  this.info.sex = v ;
			  },
			  "update" :function(){
				  var u = url + "/user/updateUser?" +
				  "age="+this.info.age+"&appearance="+this.info.appearance+"&charac="+this.info.charac+"&city="+this.info.city+
				  "&grade="+this.info.grade+"&height="+this.info.height+"&hobby="+this.info.hobby+"&id="+this.info.id+
				  "&image="+this.info.image+"&name="+this.info.name+"&say="+this.info.say+"&schoolName="+this.info.schoolName+"&sex="
				  +this.info.sex+"&speciality="+this.info.speciality;
				  console.log(u) ;
				  
				  axios.get(u)
				  .then(function(response){
				  	console.log(response) ;
				  	if(response.data.state == 0) {
						window.alert("更新成功！");
						window.localStorage.setItem("updId" , "-1") ;
						window.location.href = "index.html";
					}else{
						window.alert("更新失败！");
					}
				  });
			  },
			  "reset" : function(){
				  axios.get(url + "/user/SelectById?id=" + this.info.id)
				  .then(function(response){
				  				  console.log(response) ;
				  				 this.vue.info = response.data.data ;
				  				  console.log(response.data.data); 
				  });
			  }
		  },
		  "mounted" : function(){
			  // this.info.id = window.localStorage.getItem("updId") ;
			  console.log(url + "/user/SelectById?id=" + this.info.id);
			  axios.get(url + "/user/SelectById?id=" + this.info.id)
			  .then(function(response){
				  console.log(response) ;
				 this.vue.info = response.data.data ;
				  console.log(response.data.data); 
			  });
		  }
	  }
	  
	  var vue = new Vue(config);

  </script>
	
  </body>
</html>
